<template>
  <div v-for="(value_root, key) of device_json" :key="key">
    <el-card shadow="always">
      <template #header>
        <div class="card-head">
          <h3>{{ key }}</h3>
          <p v-if="value_root['tag']!==''">{{ value_root['tag'] }}</p>
        </div>
      </template>
      <el-checkbox-group v-model="checkboxGroups[key]" size="large" @change="saveData">
        <el-space wrap style="display:flex;justify-content:center;">
          <template v-for="(status, code) of value_root['status']" :key="status">
            <el-checkbox style="width:100px" v-if="status==='在库'" :label="formatter(code)+'号'" border/>
            <el-checkbox style="width:100px" v-else disabled :checked="false" :label="formatter(code)+'号'" border/>
          </template>
        </el-space>
      </el-checkbox-group>
    </el-card>
    <p/>
  </div>
</template>

<script>
export default {
  name: "Borrow_DeviceForm",
  props: {
    'device_json': Object,
    'name': String
  },
  methods: {
    formatter: function (code) {
      return code < 10 ? '0' + code : code.toString()
    },
    saveData: function () {
      let temp = {}
      let preData = window.localStorage["Borrow"] ? JSON.parse(window.localStorage["Borrow"]) : {}
      temp[this.$props.name] = this.checkboxGroups
      let nowData = Object.assign(preData, temp)
      window.localStorage["Borrow"] = JSON.stringify(nowData)
    }
  },
  created() {
      for(const v in this.device_json){
        this.checkboxGroups[v] = [];
      }
  },
  data() {
    return {
      checkboxGroups: {},
    }
  }
}
</script>

<style scoped>

</style>